<template>
  <div ref="scrollRef">
    <!--<van-nav-bar fixed title="商品列表" left-arrow @click-left="$utils.back($route.path)" />-->
    <div class=" has-bottom1 bg-white" style="height:100vh">
			<!-- 轮播图 -->
			<van-swipe  class="media-box" :autoplay="3000"  v-if="ShopSignList && ShopSignList.length >0">
				<van-swipe-item v-for="(item,index) in ShopSignList" :key="index">
					<imgBox :img-url="item"  class="imgBox" />
				</van-swipe-item>			
			</van-swipe>
      <div class="flex-s-s topmain">
				<!-- 黑森林自提 -->
        <div  @click="gomendian()" v-if="postType ===1">
          <div class="flex-v-c">
            <img class="mapicon mr-12" src="@/assets/images/mapicon.png" />
						<div >
							<div class="fw-b fs-32 cssmendianname1" v-if="bussinessItem.Name && bussinessItem.Name.length > 7" >{{bussinessItem.Name}}</div>
							<div class="fw-b fs-32 " v-else>{{bussinessItem.Name}}</div>
						</div>  
						<div class="csschange">
							<svg-icon icon-class="change2" class="fs-20 mt-5 mr-5" @goPage="gomendian()"/>
              <span class="color-gray fs-20">更换门店</span>  
						</div>
          </div>
          <div class="color-gray-light fs-22 mt-10 text-show-line-1" style="line-height: 1.8;">距您：{{Number(bussinessItem.distance).toFixed(3)}}km | {{bussinessItem.RegionFullName}}{{bussinessItem.ContactAddress}}</div>
        </div>
				<!-- 黑森林外送 -->
        <div   v-if="postType ===6">
          <div class="flex-v-c" @click="goaddress">
            <img class="mapicon mr-12" src="@/assets/images/mapicon.png" />
						<div >
							<div class="fw-b fs-32 cssbussinessname" v-if="addressDetail.length > 11">{{addressDetail}}</div>
							<div class="fw-b fs-32 " v-else>{{addressDetail || '请添加地址'}}</div>
						</div>            
            <svg-icon icon-class="right" class="fs-32 ml-10" @goPage="goaddress"/>					
          </div>
          <div class="color-gray-light fs-22 mt-10 flex-v-c" style="line-height: 1.2;" @click="gomendian()">
						<span class="color-gray fs-24">由</span>
						<div >
							<div class="fw-b color-black fs-24 cssmendianname2 mt-15"  v-if="bussinessItem.Name.length > 4" >{{bussinessItem.Name}}</div>
							<div class="fw-b fs-24 color-black "  v-else>{{bussinessItem.Name}}</div>
						</div> 
						<span class="color-gray fs-24 mr-10">为您配送</span>
						<div class="csschange">
							<svg-icon icon-class="change2" class="fs-20 mt-5 mr-5" @goPage="gomendian()"/>
              <span class="color-gray fs-20">更换门店</span>  
						</div>
					</div>
        </div>
        <!--<div v-else>
          <div class="flex-v-c delivery" @click="$utils.back($route.path)">
            <img class="mapicon mr-12" src="@/assets/images/mapicon.png"/>
            <span class="fs-24">{{bussinessItem.Name}}</span>   
          </div>
          <div class="fs-32 mt-10 text-show-line-1 fw-b" style="line-height: 1.2;">{{address.Address}}<svg-icon icon-class="right" class="fs-30 ml-10"/></div>
        </div>-->
        <div>
          <div class="top_right color-black ml-20" v-if="pickUptrue">
            <span class="fs-24" :class="{'active bg-primary':postType===1}" @click="delivery(1)">自提</span>
            <span class="fs-24" :class="{'active bg-primary':postType===6}" @click="delivery(6)">外送</span>
          </div>
          <div class="top_right color-black ml-20" v-else>
            <span class="fs-24" :class="{'active bg-primary':postType===6}" @click="delivery(6)">外送</span>
          </div>
        </div>
      </div>
      <!-- 搜索栏 -->
			<div :class="{'button-box-fixed':isFixed}">
				<top-search			
					type="primary"
					:val="val"
					:area-show="areaShow"
					:input-style="inputStyle"
					:placeholder="placeholder"
					@search="search"
					class="top_search"
					ref="buttonBoxSelf"
				/>
		  </div>
			<!-- 今日秒杀 -->
			<div class="mg-24" v-if="seckilldata.length >0 ">
				<seckill :info="seckilldata" :storeId ="id"/>
			</div>
			<!-- 超值团购-->
			<div class="mg-24 " v-if="groupdata.length >0 ">
				<group :info="groupdata" :storeId ="id"/>
			</div>
			
      <!-- 商品分类及列表栏 -->
      <div class="flex list-content mt-10 ">
        <!-- 商品分类 -->
        <div class="flex-s-0 scoll-y" style="background: #f5f5f5;">
          <tree :tree-data="classifyList" :active-id="activeId" @treeClickEvent="treeClickEvent" />
        </div>
        <!-- 商品列表 -->
        <div id="scrollBox" ref="scrollBox" class=" bg-f9 flex-1 scoll-y scrollBox1">

          <productList :product-list="productList" list-type="quickPlaceOrder" :switch85="switch85" :switch7="switch7" @goDetailPage="goDetailPage" @updateCart="updateCart" @showSpec="showSpec" />
          <no-data v-if="productList.length === 0" />
          <p v-if="end===true&&productList.length!==0" class="tac fs-24 ptb-40 color-gray-light">无更多数据</p>
        </div>
      </div>
			<div style="height:120px" />
    </div>

    <!-- 底部栏购物车 -->
    <shopCart :car-list="carList" :shoplist="1" car-type="blacForest" :addressId="addressId" :postType="postType" :storeId="id" @cleanCart="cleanCart" @updateCart="carUpdateCart" />
    <ul class="nav-list nav-list--bottom">
      <li class="nav-item">
        <a @click="goUrl($webInfo.HomeIndex)">
          <img class="item-icon" src="@/assets/images/navlist/n1.png"/>
          <p class="item-txt">首页</p>
        </a>
      </li>
      <li class="nav-item">
        <a @click="gomendian()">
        <!--<a @click="goUrl('/m/retail/shoplist')">-->
          <img class="item-icon" src="@/assets/images/navlist/n2.png"/>
          <p class="item-txt">门店</p>
        </a>
      </li>
      <li class="nav-item">
        <a @click="goUrl('/m/retail/order')">
          <img class="item-icon" src="@/assets/images/navlist/n3.png"/>
          <p class="item-txt">订单</p>
        </a>
      </li>
      <li class="nav-item">
        <a @click="goUrl('/m/user/usercard')">
          <img class="item-icon" src="@/assets/images/navlist/n4.png"/>
          <p class="item-txt">我的</p>
        </a>
      </li>
    </ul>
    <!-- 商品详情弹窗 -->
    <van-popup v-model="detailShow" position="bottom" class="full-width full-height detail-page">
      <peoductDetail :detail-data="detailData" :storeId="id" :evaluate-data="evaluateData"  @clickLeft="clickLeft" @showOpt="showOpt" @changeAddress="changeAddress" />
    </van-popup>

    <!-- 商品规格选择弹窗 -->
    <van-popup v-model="optPopup.show" position="bottom" class="bottom-popup">
      <!--<ProductSpec v-show="optPopup.type==='attr'" :storeId="id" :data="optPopup.data" :switch7="switch7" :switch85="switch85" :fresh="optPopup.change" :popup-type="optPopup.type" @closePopup="closePopup" @addCart="addCart" />-->
			<specTree v-show="optPopup.type==='attr'" :storeId="id" :data="optPopup.data" :fresh="optPopup.change" :switch85="switch85" :switch203="switch203" :switch7="switch7" :popup-type="optPopup.type" @closePopup="closePopup" @addCart="addCart" />
		</van-popup>
	
		<!-- 选择外送地址弹窗 -->
		<van-popup v-model="openaddress" position="bottom" class="bottom-popup">
      <addressList  class=" bg-gray" style="min-height:100vh" @colseAdress="closeAddressop" @changeAddress="changeAddress" />
    </van-popup>
  </div>
</template>

<script>
import TopSearch from 'components/Search'
import noData from 'components/noData'
import productList from 'components/productList'
import shopCart from 'components/shopCart'
import peoductDetail from 'components/productDetail'
import ProductSpec from 'components/productDetail/spec'
import tree from 'components/productList/tree'
import imgBox from 'components/imgBox'
import seckill from 'components/seckill'
import group from 'components/group'
import addressList from 'components/address'
import storeList from 'components/nearbyShop'
import {
  GetStoreProductPage,
  GetStoreCategory,
  GetProductTypeTree,
  GetWholeSaleListForSku,
  GetUserCarList,
  GetInintProductDetailInfo,
  GetCommentListByProduct,
} from 'api/product'
import { GetReceivingAddressList, AddOrEditUserCarList } from 'api/member'
import { GetSeckillActivityByPage, GetGroupProductPage,GetNowTime } from 'api/activity'
import { GetStoreInfo } from 'api/store'
import { GetBusinessFunction } from 'api/businessSetting'
import specTree from 'components/productDetail/specTree'
export default {
  components: {
    TopSearch,
    noData,
    productList,
    shopCart,
    peoductDetail,
    ProductSpec,
    tree,
		imgBox,
		seckill,
		group,
		addressList,
		storeList,
		specTree
  },
  data() {
    return {
      // 搜索栏配置及数据
      id: '',
      areaShow: false,
      val: '',
      placeholder: '请输入商品名称',
      inputStyle: 'inputStyle-1',
      displayData: {}, // 整体显示设置
      priceDecimalPlaces: 2,
      sortActiveIndex: 0,

      // 分类栏配置及数据
      activeId: -1,
      classifyList: [],
      initClassify: true, // 是否需要初始化分类

      // 商品列表
      productList: [],
      updateList: true, // 是否需要更新商品列表

      // 购物车数据
      carList: [],

      // 商品详情
      detailData: {},
      oldID: 0,
      detailShow: false,

      detailIndex: -1,
      SpecIndex: -1,

      // 评价数据
      evaluateData: {},

      // 收货地址
      addressList: [],

      // sku 商品规格弹窗
      optPopup: {
        data: {},
        type: '',
        change: false,
        show: false,
      },

      cartRequestList: [],

      // 滚动状态
      totalAmout: 0,
      scollRequest: true,
      scollTop: 0,
      end: false,

      // 请求参数
      requestData: {
        productName: '',
        pageIndex: 1,
        pageSize: 10,
      },

      commentRequest: {
        page: 1,
        size: 3,
      },
      lng: 0,
      lat: 0,
      bussinessItem: {},
      postType: null,
      topHeight: null,
      pickUptrue: false,
      address: {},
			ShopSignList:[],
			seckilldata:[],
			groupdata:[],
			nowTime:null,
			addressId:0,
      openaddress:false, //地址弹窗
			addressDetail:'', // 拼接的从街道到具体地址
			openstore:false,
			switch203: 0,
			switch85:0, // 1-成功 0-失败 2-未登陆
			switch7: 0, // 微商下单不限制库存
			timer:null,
		  isFixed:false,
      descriptionList:[],
      i:0
    }
  },
  created() {
    console.log(this.$route.query.lng,"经纬度")
    if (this.$route.query.invit_user_id) {
      localStorage.setItem('invit_user_id', this.$route.query.invit_user_id)
    }
    if (this.$route.query && this.$route.query.lng !== 'undefined') {
      const _query = this.$route.query
      this.lng = _query.lng || 0
      this.lat = _query.lat || 0
			console.log("111111111")
    } else {
      const _GeolocationData = localStorage.getItem('GeolocationData')
			console.log('_GeolocationData',_GeolocationData)
      if (_GeolocationData) {
        // 存在定位缓存
        const _GeolocationObj = JSON.parse(_GeolocationData)
        if (_GeolocationObj.center && _GeolocationObj.center.length > 0) {
          this.lng = _GeolocationObj.center[0]
          this.lat = _GeolocationObj.center[1]
        } else if (_GeolocationObj.position) {
          this.lng = _GeolocationObj.position.lng
          this.lat = _GeolocationObj.position.lat
        }
      }
    }
		if(this.$route.query.postType){
			this.postType = parseInt(this.$route.query.postType) 
		}
    this.id = this.$route.params.id
		this.GetBusinessFunction()
		this.setInterval()
    this.GetStoreInfo()
    this.GetUserCarList()
		this.getskeckilldata()
		this.getgroupdata()
    this.GetReceivingAddressList()
	
  },
	mounted(){
		this.$nextTick(()=>{
      window.addEventListener('scroll', this.handleScroll, true)
      document.querySelector('#scrollBox').addEventListener('scroll', this.onScroll)
    })
	},
  //mounted() {
  //  this.$nextTick(function () {
  //    document.querySelector('#scrollBox').addEventListener('scroll', this.onScroll)
  //  })
  //},
  methods: {
    handleScroll(){
      var top = Math.floor(document.body.scrollTop || document.documentElement.scrollTop || window.pageYOffset)
      var dom = document.querySelector('.scrollBox1').getBoundingClientRect().top
      var windowscroll = document.body.scrollHeight - document.body.clientHeight;
          var scroll = top - this.i;
            this.i = top;
            if(scroll<=0){
              if(dom >= 165){
                  this.isFixed = false;
                }
            }else{
              if(dom <= 165){
                this.isFixed = true;
                document.documentElement.scrollTop = document.body.scrollTop = windowscroll
                }else{
                  this.isFixed = false;
                }
            }
          
		
    },
		//获取开关权限
		GetBusinessFunction(){
			GetBusinessFunction(203).then(res => {
        if (res) {
          this.switch203 = res.Data[0].Value;
        }
      })
      GetBusinessFunction(85).then(res => {
        if (res) {
          this.switch85 = res.Data[0].Value;
        }
      })
			GetBusinessFunction(7).then(res => {
        if (res) {
          this.switch7 = res.Data[0].Value;
        }
      })
    },
		getskeckilldata(){
			let param = {
				"status": 1,
				"isByStartTime": 0,
				"timeStatus": 1,
				"auditStatus": 1,
				"isStore": 1,
				"storeId": this.id,
				"pageIndex": 1,
				"pageSize": 2
      }
			GetSeckillActivityByPage(param).then((res) => {
				if (res) {
					res.Data.Data.forEach(x=>{
						x.TagList = x.TagList.slice(0,3)
						x.speed = ((x.UseQty / x.Quantity )*100).toFixed(2) 
						x.Days = "00"
						x.Hours = "00"
						x.Minutes = "00"
						x.Seconds = "00"
						
					})
					this.seckilldata = res.Data.Data
				}
			})
		},
		getgroupdata(){
			let param = {
				"groupType": 0,
				"isRetail": 1,
				"storeId": this.id,
				"pageIndex": 1,
				"pageSize": 2
      }
			GetGroupProductPage(param).then((res) => {
				if (res) {
					let data = res.Data.Data
					data.forEach(x=>{
						x.Days = "00"
						x.Hours = "00"
						x.Minutes = "00"
						x.Seconds = "00"
					})
					this.groupdata = data
				}
			})
		},
		setInterval () {
			var that = this;
			//当前时间
			GetNowTime().then(rsp => {
				if(rsp.State==1){
					that.nowTime = new Date(rsp.Data.replace(/-/g, '/')).getTime();
					setInterval(e => {
						that.nowTime += 1000;
						that.setCountDown1();
						that.setCountDown2();
					},1000)
				}
			})
		},
		//秒杀设置倒计时
		setCountDown1 () {
				if (!this.nowTime || !this.seckilldata.length) {
						return;
				}
				this.seckilldata.forEach(item =>{
							
								var diff = new Date(item.EndTime.replace(/-/g, '/')).getTime() - this.nowTime;   //时间差的毫秒数 
								if (diff < 0) {
								
										diff = new Date(item.EndTime.replace(/-/g, '/')).getTime() - this.nowTime;   //时间差的毫秒数 
								}
								if (diff >= 0) {
										//计算出相差天数  
										var days = Math.floor(diff / (24 * 3600 * 1000));
										//计算出小时数  
										var leave1 = diff % (24 * 3600 * 1000);    //计算天数后剩余的毫秒数
										var hours = Math.floor(leave1 / (3600 * 1000));
										//计算相差分钟数  
										var leave2 = leave1 % (3600 * 1000);        //计算小时数后剩余的毫秒数
										var minutes = Math.floor(leave2 / (60 * 1000));
										//计算相差秒数  
										var leave3 = leave2 % (60 * 1000);      //计算分钟数后剩余的毫秒数
										var seconds = Math.round(leave3 / 1000);
										item.Days =  (days > 9 ? "" : "0") + days
										item.Hours = (hours > 9 ? "" : "0") + hours
										item.Minutes = (minutes > 9 ? "" : "0") + minutes
										item.Seconds =(seconds > 9 ? "" : "0") + seconds
								}
								else {
										item.Days = "00"
										item.Hours = "00"
										item.Minutes = "00"
										item.Seconds = "00"
								}
						});
		},		
		//拼团倒计时
		setCountDown2 () {
				if (!this.nowTime || !this.groupdata.length) {
						return;
				}
				this.groupdata.forEach(item =>{
							
								var diff = new Date(item.EndTime.replace(/-/g, '/')).getTime() - this.nowTime;   //时间差的毫秒数 
								if (diff < 0) {
								
										diff = new Date(item.EndTime.replace(/-/g, '/')).getTime() - this.nowTime;   //时间差的毫秒数 
								}
								if (diff >= 0) {
										//计算出相差天数  
										var days = Math.floor(diff / (24 * 3600 * 1000));
										//计算出小时数  
										var leave1 = diff % (24 * 3600 * 1000);    //计算天数后剩余的毫秒数
										var hours = Math.floor(leave1 / (3600 * 1000));
										//计算相差分钟数  
										var leave2 = leave1 % (3600 * 1000);        //计算小时数后剩余的毫秒数
										var minutes = Math.floor(leave2 / (60 * 1000));
										//计算相差秒数  
										var leave3 = leave2 % (60 * 1000);      //计算分钟数后剩余的毫秒数
										var seconds = Math.round(leave3 / 1000);
										item.Days =  (days > 9 ? "" : "0") + days
										item.Hours = (hours > 9 ? "" : "0") + hours
										item.Minutes = (minutes > 9 ? "" : "0") + minutes
										item.Seconds =(seconds > 9 ? "" : "0") + seconds
								}
								else {
										item.Days = "00"
										item.Hours = "00"
										item.Minutes = "00"
										item.Seconds = "00"
								}
						});
		},		

    navigation() {
      this.$utils.back()
      // console.log('导航')
      // console.log(this.bussinessItem)
      // this.$utils.navigation(this.bussinessItem)
    },
    delivery(num) {
      if (this.postType != num) {
        this.postType = num
				console.log('选择配送方式--this.postType',this.postType)
      }
    },
    goUrl(url) {
      console.log(url)

      window.location.href = url
    },
    GetStoreInfo() {
      let param = {
        id: this.id,
        lng: this.lng,
        lat: this.lat,
      }
      GetStoreInfo(param).then((res) => {
        if (res) {
          const _this = this
          const _data = res.Data
          const _province = _data.ProvinceName || ''
          const _city = _data.CityName || ''
          const _detailAddress = _data.ContactAddress || ''
          _data.DetailAddress = _province + _city + _detailAddress
          _this.bussinessItem = _data
					this.shopName = _data.Name
					console.log('this.shopName',this.shopName)
						if (_data.SelfPickUp == 1) {
							_this.pickUptrue = true
							_this.postType = this.postType ? this.postType :_data.SelfPickUp
						} else {
							_this.postType = 6
						}
				
         
          // 商家介绍
          if (_data.Description) {
            if (_data.Description.indexOf('\n') >= 0) {
              const arr = _data.Description.split('\n')
              arr.forEach(function (item) {
                if (item) {
                  _this.descriptionList.push(item)
                }
              })
            } else {
              _this.descriptionList.push(_data.Description)
            }
          } else {
            _this.descriptionList = ['暂无介绍']
          }
          // 轮播图
          if (res.Data.ShopSign) {
            this.ShopSignList = res.Data.ShopSign.split(',')
          }
        }
      })
    },
    // 关键字搜索商品
    search(key) {
      console.log(key)
      this.resetParams()
      this.requestData.productName = key
      this.GetWholeSaleListForSku()
    },
    // 获取收货地址
    GetReceivingAddressList(searchKey = '') {
      GetReceivingAddressList({ searchKey }).then((res) => {
        if (res) {
          res.Data.forEach((item) => {
						if (this.$route.query.addressDetail) {
							 this.addressDetail = this.$route.query.addressDetail
							 this.addressId = Number(this.$route.query.addressId)
						} else {
							//获取默认地址
							if (item.IsDefault) {
              this.address = item
							this.addressId = item.ID
							this.addressDetail = `${item.StreetName || ''}${item.ContactAddress}`
							//if (this.item.Lng === 0) {
							//	this.$toast.fail('您选择的地址无定位信息，请重新定位')
							//}
            }
						}
						
						
          })
          //console.log('this.address',this.address)
        }
      })
    },
		//打开门店
		gomendian(){
	    let param = {}
			console.log('this.postType',this.postType)
			console.log('this.address',this.address)
			if (this.postType == 6) {
				if (this.addressId != 0 ) {
				   param = {					
						addressDetail:this.addressDetail,
						addressId:this.addressId,
					}					
				}
				this.$router.push(`/nearbyShop?name=${this.bussinessItem.Name}&postType=${this.postType}&param=${JSON.stringify(param)}`)
			} else {
				this.$router.push(`/nearbyShop?name=${this.bussinessItem.Name}&postType=${this.postType}`)
			}
			
			
		},
		//打开地址弹窗
		goaddress(){
			this.openaddress = true
		},
		closeAddressop() {
      this.openaddress = false
    },
		changeAddress(address) {
      this.detailData.UserAddress = address
      this.address = address
			this.addressId = address.ID
			this.addressDetail = `${address.StreetName || ''}${address.ContactAddress}`
			//if (this.address.Lng === 0) {
			//	this.$toast.fail('您选择的地址无定位信息，请重新定位')
			//}
      // this.$forceUpdate()
    },
    showOpt(type) {
      console.log(type)
      if (this.detailIndex !== this.SpecIndex) {
        this.optPopup.data = this.productList[this.detailIndex]
      }
      this.optPopup.type = type
      this.optPopup.show = true
    },

    // 重置请求参数及数据
    resetParams() {
      this.requestData.pageIndex = 1
      this.requestData.pageSize = 10
      this.scollRequest = true
      this.scollTop = 0
      this.end = false
      this.productList = []
    },
    // 点击分类事件
    treeClickEvent(item, treeItem) {
      if (this.activeId !== item.id) {
        this.activeId = item.id
        this.resetParams()
        this.requestData.type = item.id
        this.GetWholeSaleListForSku()
      }
    },
    // 打开商品详情弹窗
    goDetailPage(item, index) {
      this.detailIndex = index
      const id = item.ID
			this.$router.push('/quickPlaceOrder/retailDetail/' + item.ID + '?storeId=' + this.id)
			//if (id === this.oldID) {
      //  this.detailShow = true
      //} else {
      //  this.oldID = id
      //  this.GetCommentListByProduct(id)
      //  this.GetInintProductDetailInfo(id)
      //}
    },
    showSpec(item, index) {
			console.log(item,"规格")
      this.SpecIndex = index
      this.optPopup.type = 'attr'
      this.optPopup.data = item
      this.optPopup.show = true
    },
    updateCart(item) {
      const _obj = {}
      _obj.ProductId = item.ID
      _obj.Amount = item.Amount
      _obj.SkuId = item.ProductSkuList[0].ID
      _obj.StoreId = this.id
      _obj.Source = 1
      this.cartRequestList = []
      this.cartRequestList.push(_obj)
      this.AddOrUpdateAmount()
    },
    

    // 规格弹窗组件方法
    addCart(arr) {
      this.cartRequestList = arr
      if (this.cartRequestList.length <= 0) {
        this.$toast.fail('请选择商品')
        return
      }
      this.AddOrUpdateAmount()
    },
    closePopup() {
      this.optPopup.show = false
    },
    searchAdress() {},

    // 底部购物车组件方法
    cleanCart() {
      this.carList = []
      this.optPopup.change = !this.optPopup.change
      this.changeArr(this.productList, false)
    },
    carUpdateCart(bool) {
      if (bool) {
        this.GetUserCarList()
      } else {
        this.changeArr(this.productList, false)
      }
    },

    // 详情弹窗方法
    clickLeft() {
      this.detailShow = false
    },

    // 整理数据
    changeArr(Arr, isNew) {
      const _this = this
      Arr.forEach((item) => {
        // 图片列表
        if (item.ImageUrl) {
          const ImgUrlList = _this.$utils.strToArr(item.ImageUrl)
          item.logo = ImgUrlList[0]
        }
        item.BaseUnit = item.DefaultUnit
        // 单位列表
        if (item.Unit && item.Unit.indexOf(',') !== -1) {
          item.UnitList = item.Unit.split(',')
          item.BaseUnit = item.UnitList[0]
        }
        // 换算比例列表
        if (item.Unitratio && item.Unitratio.indexOf(':') !== -1) {
          item.UnitratioList = item.Unitratio.split(':')
        }
				// // 有默认单位换算的比例值
				// if( item.UnitratioList){
				// 	if (item.DefaultUnit === item.UnitList[0]) {
				// 		item.scale = 1
				// 	} else {
				// 		var index =item.UnitList.findIndex(i=>i==item.DefaultUnit)				
				// 		item.index = index	
				// 		item.scale = Number(item.UnitratioList[index]) / Number(item.UnitratioList[0])
				// 	}
					
				// }else{
				// 	item.scale = 1
				// }
        // 按单限购
        if (item.ProductSkuList && item.ProductSkuList.length === 1) {
          item.oLimitBuy = item.ProductSkuList[0].LimitBuy
        }
        // 购物车数量（同步）
        if (_this.carList && _this.carList.length > 0) {
          const _list = _this.carList
          for (let i = 0; i < _list.length; i++) {
            if (_list[i].ProductId === item.ID) {
              // 判断购物车中的商品是否为当前商品
              if ((item.UnitList && item.UnitList.length > 1) || (item.ProductSkuAttrList && item.ProductSkuAttrList.length > 1)) {
                // 多规格商品
                for (let j = 0; j < item.ProductSkuAttrList.length; j++) {
                  if (item.ProductSkuAttrList[j].SkuList && item.ProductSkuAttrList[j].SkuList.length > 0) {
                    for (let k = 0; k < item.ProductSkuAttrList[j].SkuList.length; k++) {
                      if (_list[i].SkuId === item.ProductSkuAttrList[j].SkuList[k].ID) {
                        item.ProductSkuAttrList[j].SkuList[k].Amount = _list[i].Amount
                        console.log('匹配成功')
                        break
                      }
                    }
                  }
                }
              } else {
                // 单规格商品
                console.log('同步单规格')
                item.Amount = _list[i].Amount
                break
              }
            } else {
              item.Amount = 0
            }
          }
        } else {
          item.Amount = 0
          if (item.ProductSkuAttrList && item.ProductSkuAttrList.length > 0) {
            // 多规格商品
            for (let j = 0; j < item.ProductSkuAttrList.length; j++) {
              if (item.ProductSkuAttrList[j].SkuList && item.ProductSkuAttrList[j].SkuList.length > 0) {
                for (let k = 0; k < item.ProductSkuAttrList[j].SkuList.length; k++) {
                  item.ProductSkuAttrList[j].SkuList[k].Amount = 0
                }
              }
            }
          }
        }
        if (isNew) {
          _this.productList.push(item)
        }
      })
    },

    // 滚动事件触发下拉加载
    onScroll() {			
      const _this = this
      //if (_this.scollRequest === true) {
      //  if (
      //    this.$utils.getScrollHeight('scrollBox') - this.$utils.getClientHeight('scrollBox') - this.$utils.getScrollTop('scrollBox') <=
      //    5
      //  ) {
      //    _this.scollRequest = false        
      //    console.log('加载')
      //    _this.scollTop = this.$utils.getScrollTop('scrollBox')
      //    if (_this.requestData.pageIndex < _this.totalAmout) {
      //      _this.requestData.pageIndex++
      //      _this.GetWholeSaleListForSku()
      //    } else {
      //      console.log('end')
      //      _this.end = true
      //    }
      //   
      //  }
      //}
			_this.scollRequest = false        
          // console.log('加载')
          _this.scollTop = this.$utils.getScrollTop('scrollBox')
          var windowscroll = document.body.scrollHeight - document.body.clientHeight;
          if(_this.scollTop){
            document.documentElement.scrollTop = document.body.scrollTop = windowscroll
          }
          if (_this.requestData.pageIndex < _this.totalAmout) {
            _this.requestData.pageIndex++
            _this.GetWholeSaleListForSku()
          } else {
            // console.log('end')
            _this.end = true
          }
    },

    // 获取门店商品分类列表
    GetProductTypeTree() {
      GetStoreCategory({ storeId: this.id }).then((res) => {
        if (res) {
          this.initClassify = false
          this.classifyList = []
          const totalClassify = {
            OrderBy: res.Data.OrderBy,
            id: res.Data.id,
            name: res.Data.name,
            parent_id: res.Data.parent_id,
            parent_path: res.Data.parent_path,
            type_id: res.Data.type_id,
          }
          this.classifyList.push(totalClassify)
          if (res.Data.children && res.Data.children.length > 0) {
            res.Data.children.forEach((item) => {
              this.classifyList.push(item)
            })
          }
          this.activeId = res.Data.id
          this.requestData.type = res.Data.id
          this.productList = []
          this.GetWholeSaleListForSku()
        }
      })
    },

    // 获取商品列表
    GetWholeSaleListForSku() {
      const _this = this
      _this.requestData.storeId = this.id
      GetStoreProductPage(_this.requestData).then((res) => {
        if (res) {
          if (res.Data.Data.length && res.Data.Data.length > 0) {
            console.log('购物车数据')
            console.log(_this.carList)
            console.log(res.Data.Data)
            this.changeArr(res.Data.Data, true)
            _this.totalAmout = res.Data.TotalAmout
            _this.scollRequest = true
            if (_this.scollTop > 0) {
              _this.$refs.scrollBox.scrollTo(0, _this.scollTop)
            }
          }
        }
      })
    },

    // 获取购物车列表
    GetUserCarList() {
      GetUserCarList({ priceType: 1, storeId: this.id, IsRetail: 1, isFilterStore: 1 }).then((res) => {
        if (res) {
          this.carList = res.Data
          if (this.initClassify) {
            this.GetProductTypeTree()
          } else if (this.updateList) {
            this.changeArr(this.productList, false)
          }
        }
      })
    },

    // 获取商品详情
    GetInintProductDetailInfo(id) {
      GetInintProductDetailInfo({ productId: id, InfoType: 1 }).then((res) => {
        if (res) {
          this.detailData = res.Data
          this.detailData.imgList = res.Data.ProductInfo.ImageUrl.split(',')
						// // 换算比例列表
						// if (this.detailData.ProductInfo.Unitratio && this.detailData.ProductInfo.Unitratio.indexOf(':') !== -1) {
						// 	this.detailData.ProductInfo.UnitratioList = this.detailData.ProductInfo.Unitratio.split(':')
						// }				

					  // // 有默认单位换算的比例值
						// if( this.detailData.ProductInfo.UnitratioList){
						// 	if (this.detailData.ProductInfo.DefaultUnit === this.detailData.ProductInfo.UnitList[0]) {
						// 		this.detailData.ProductInfo.scale = 1
						// 	} else {
						// 		var index =this.detailData.ProductInfo.UnitList.findIndex(i=>i==this.detailData.ProductInfo.DefaultUnit)					
						// 		this.detailData.ProductInfo.scale = Number(this.detailData.ProductInfo.UnitratioList[index]) /Number(this.detailData.ProductInfo.UnitratioList[0])
						// 	}
							
						// }else{
						// 	this.detailData.ProductInfo.scale = 1
						// }
						this.detailShow = true
					}
      })
    },

    // 更新购物车
    AddOrUpdateAmount() {
			console.log('加减了')
      const _obj = {}
      _obj.list = this.cartRequestList
      AddOrEditUserCarList(_obj).then((res) => {
        if (res) {
          console.log('加减了res',res)
          this.optPopup.show = false
          this.updateList = true
          this.GetUserCarList()
        }
      })
    },

    // 获取评价
    GetCommentListByProduct(id) {
      this.commentRequest.product_id = id
      GetCommentListByProduct(this.commentRequest).then((res) => {
        if (res) {
          console.log(res)
          this.evaluateData = res.Data
        }
      })
    },


  },
}
</script>
<style lang="scss" scoped>
.color-white {
  /deep/.van-icon {
    color: #fff;
  }
  /deep/.van-nav-bar__title {
    color: #fff;
  }
}
.list-content {
  height: calc(100% - 310px);
}

// 以上修整完成
.scoll-y {
  overflow-y: scroll;
}
.classifyItem {
  width: 200px;
}
.activeIndex {
  background: $colorF;
  position: relative;
  &:before {
    content: '';
    height: calc(100% - 40px);
    width: 8px;
    @include bg-primary();
    position: absolute;
    top: 20px;
    left: 0;
    border-radius: 0 8px 8px 0;
  }
}
.van-popup {
  background: transparent;
}
.detail-page {
  background: $colorF5;
}

.tab-bar {
  display: flex;

  flex-direction: row;
  background: $colorF;
  padding: 20px 0;
  .tab-item {
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    .teb-item-text {
      display: flex;
      font-size: 26px;
      font-weight: bold;
      margin-bottom: 10px;
    }
    .teb-item-border {
      display: flex;
      width: 80px;
      height: 6px;
      border-radius: 3px;
      background: rgba($color: #000000, $alpha: 0);
    }
  }
  .activeBorder {
    .teb-item-text {
      @include color-primary;
    }
    .teb-item-border {
      @include bg-primary();
    }
  }
}
.filter-tab {
  display: flex;
  flex-direction: row;
  position: relative;
  padding: 10px 24px 20px;
  .filter-item {
    display: flex;
    flex-grow: 0;
    flex-shrink: 0;
    width: calc(33% - 15px);
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    height: 54px;
    background: $colorF4;
    border: solid 1px $colorF4;
  }
  .filter-checked {
    @include color-primary;
    background: $colorF;
    @include border-primary;
  }
  .filter-active {
    background: transparent;
    color: #000 !important;
    position: relative;
    @include border-primary;
    &:after {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      @include color-primary;
      @include bg-primary;
      opacity: 0.1;
      border-radius: 10px;
    }
  }
  .change-theme {
    background: $colorF;
    border: solid 1px #171817;
  }
  .filter-pop {
    position: absolute;
    z-index: $zIndexPopup;
    top: 84px;
    left: 0;
    width: 100%;
    height: calc(100vh - 370px);
    .filter-cover {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      background: $colorOverlay;
    }
    .filter-pop-content {
      position: relative;
      background: $colorF;
      .filter-pop-item-box {
        padding: 40px 24px 50px;
        position: relative;
        display: flex;
        flex-wrap: wrap;
        .filter-pop-item {
          flex-shrink: 0;
          flex-grow: 0;
          position: relative;
          width: calc(33.33% - 14px);
          margin-right: 20px;
          margin-bottom: 20px;
          text-align: center;
          line-height: 72px;
          padding: 0 20px;
          background: $colorF4;
          border: solid 1px $colorF4;
          border-radius: 6px;
          &:nth-child(3n) {
            margin-right: 0px;
          }
        }
        .filter-selected {
          @include color-primary;
          border-color: currentColor;
          &:before,
          &:after {
            content: '';
            position: absolute;
          }
          &:before {
            background: currentColor;
            width: 54px;
            height: 54px;
            border-radius: 100%;
            bottom: -27px;
            right: -27px;
          }
          &:after {
            width: 6px;
            height: 12px;
            border: 5px solid;
            border-color: transparent $colorF $colorF transparent;
            transform: rotate(45deg);
            bottom: 6px;
            right: 4px;
          }
        }
      }
      .filter-pop-item-box-1 {
        padding: 30px 24px 40px;
        font-size: 26px;
        .filter-pop-item-1 {
          padding: 30px 0;
        }
        .item-checked {
          position: relative;
          @include color-primary;
          &:after {
            content: '';
            position: absolute;
            width: 6px;
            height: 18px;
            border: 5px solid;
            border-color: transparent currentColor currentColor transparent;
            transform: rotate(45deg);
            bottom: 40px;
            right: 10px;
          }
        }
      }
      .filter-bottom {
        padding: 32px 24px;
        position: relative;
        .btn {
          width: calc(50% - 20px);
          line-height: 72px;
          border-radius: 8px;
        }
      }
    }
  }
}
.zIndexBottom {
  z-index: $zIndexHeader;
}
.nav-list--bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background-color: #fff;
  height: 120px;
  text-align: center;
  color: #666;
  font-size: 24px;
  border-top: 1px solid #dadada;
  display: flex;
}
.nav-item {
  position: relative;
  text-align: center;
  flex: 1;
}
.nav-list .nav-item a {
  height: 120px;
  padding-top: 70px;
  display: block;
  color: #666;
}
.nav-list--bottom .item-icon {
  top: 10px !important;
  width: 45px;
  height: 48px;
  line-height: 48px;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
}
.has-bottom1 {
  //padding-bottom: 250px;
}
.mapicon {
  width: 36px;
  height: 36px;
}
.topmain {
  height: 130px;
  padding: 30px 32px 0 32px;
  background: #fff;
	border-top-left-radius: 24px;
	border-top-right-radius: 24px;
	margin-top: -20px;
	position: relative;
}
.top_right {
  // width: 172px;
  height: 50px;
  background: rgba(63, 65, 86, 0.08);
  border-radius: 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  span {
    color: #666;
    width: 76px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    white-space: nowrap;
  }
  .active {
    color: #fff;
    width: 96px;
    border-radius: 32px;
    padding: 0 24px;
  }
}
.delivery {
  .mapicon {
    width: 24px;
    height: 24px;
  }
}
.top_search {
  height: 90px;
  overflow: hidden;
}

// 图片轮播
.media-box{  
  height: 498px;
  .imgBox{
    width: 100%;
    height: 100%;
  }
}
.csschange{
	background: #F4F5F6 ;
	border-radius: 16px;
	padding:0 10px;
	width: 140px;
	height: 32px;
	line-height: 32px;
	display: inline-flex;
	margin-left: 10px;
}
.changeicon{
	width: 18px;
	height: 18px;
	margin-top: 5px;
	margin-left: 5px;
	margin-right: 5px;
}
.cssmendianname1{
	width: 280px;
	height: 45px;  
  -webkit-box-orient: vertical;
  -webkit-line-clamp:1;
  text-overflow:ellipsis;
  overflow: hidden;
  white-space:nowrap;
}
.cssmendianname2{
	width: 190px;
	height: 45px;  
  -webkit-box-orient: vertical;
  -webkit-line-clamp:1;
  text-overflow:ellipsis;
  overflow: hidden;
  white-space:nowrap;
}
.cssbussinessname{
	width: 380px;
	height: 45px;  
  -webkit-box-orient: vertical;
  -webkit-line-clamp:1;
  text-overflow:ellipsis;
  overflow: hidden;
  white-space:nowrap;
}
.stickyTop {
	top: 0;
	z-index: 10;
}
.button-box-fixed {
  position: fixed;
  top: 0;//这个需要根据实际情况来调整
  z-index: 3;
  width: 100%;
  box-shadow: 0 6px 12px 0 rgba(167, 165, 165, 0.05);
}

</style>
